<template>
    <div class="box">
        <canvas id="can" width="600" height="600"></canvas>
    </div>
    <div class="box">
        <canvas id="can2" width="600" height="600"></canvas>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import img1 from './images/0.jpg';
import img2 from './images/1.jpg';
import img3 from './images/2.jpg';
import img4 from './images/3.jpg';
import img5 from './images/4.jpg';
import img6 from './images/5.jpg';

import type { Ref } from 'vue';
const beginPathTime = () => {
    let canvas = document.querySelector('#can');
    let ctx = canvas.getContext('2d');

    let width = ctx.canvas.width
    let height = ctx.canvas.height
    let r = width / 2; //半径

    // 绘制背景
    const drawBackground = () => {
        ctx.save();
        ctx.translate(r, r);
        ctx.beginPath();
        ctx.lineWidth = 2;

        //绘制时钟边框
        ctx.arc(0, 0, r - ctx.lineWidth / 2, 0, 2 * Math.PI);
        ctx.closePath();
        ctx.strokeStyle = '#333';
        ctx.stroke();

        // 刻度数字：由于圆的起始方向为x正方向，故起始为3
        let hourNum = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]
        hourNum.map(function (num, i) {
            var rad = 2 * Math.PI / 12 * i   // 2 PI 是一圈 ，拆成12份
            var x = Math.cos(rad) * (r * 10 / 12);
            var y = Math.sin(rad) * (r * 10 / 12);
            //设置接下来填充的文字样式
            ctx.font = '13px Arial'
            ctx.textAlign = 'center'
            ctx.textBaseline = 'middle'
            ctx.fillStyle = '#333'
            ctx.fillText(num, x, y);
        })

        // 绘制分钟刻度
        for (var i = 0; i < 60; i++) {
            var rad = 2 * Math.PI / 60 * i
            var x = Math.cos(rad) * (r * 95 / 100)
            var y = Math.sin(rad) * (r * 95 / 100)
            ctx.beginPath()
            if (i % 5 == 0) {
                ctx.fillStyle = '#000'
                ctx.arc(x, y, 2, 0, 2 * Math.PI, false)
            } else {
                ctx.fillStyle = '#8888'
                ctx.arc(x, y, 2, 0, 2 * Math.PI, false)
            }
            ctx.fill()
        }
        ctx.restore(); // 还原原有的上下文信息
    }
    // 绘制 时 分 秒指针
    const drawHour = (hour, minute) => {
        ctx.save();
        ctx.translate(r, r);
        let rad = 2 * Math.PI / 12 * hour;
        let mad = 2 * Math.PI / 12 / 60 * minute;
        ctx.rotate(rad + mad);
        ctx.beginPath();
        ctx.lineWidth = 3;
        ctx.lienCap = 'round';
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -r / 3);
        ctx.stroke();
        ctx.restore();
    }
    const drawMinute = (minute) => {
        ctx.save();
        ctx.translate(r, r);
        let rad = 2 * Math.PI / 60 * minute; //2Π 是一圈，再拆成60个格子 
        ctx.rotate(rad);
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.lineCap = 'round';
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -r / 2);
        ctx.stroke();
        ctx.restore();
    }
    const drawSecond = (second) => {
        ctx.save()
        ctx.translate(r, r);
        let rad = 2 * Math.PI / 60 * second
        ctx.rotate(rad);
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.lineCap = 'round';
        ctx.strokeStyle = 'red';
        ctx.moveTo(0, 0);
        ctx.lineTo(0, -r * 9 / 10);
        ctx.stroke();
        ctx.restore();
    }
    const drawMyClock = () => {
        ctx.clearRect(0, 0, width, height) //清空，否则会重复绘制
        let now = new Date();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let second = now.getSeconds();
        drawBackground();
        drawHour(hour, minute);
        drawMinute(minute);
        drawSecond(second);
    }
    drawMyClock();
    setInterval(function () { //设置定时器直接
        drawMyClock();
    }, 1000);
    drawBackground();
}
const beginPathHeart = () => {
    let canvas = document.querySelector('#can2');
    let ctx = canvas.getContext('2d');

    let width = ctx.canvas.width
    let height = ctx.canvas.height
    let r = width / 2; //半径

    ctx.translate(r, r);
    ctx.scale(1, -1);
    ctx.moveTo(0, 0);

    let imgs_ = [img1, img2, img3, img4, img5, img6];
    let imgs: any = [];
    imgs_.map((v) => {
        let img = new Image(50, 50);
        img.src = v;
        imgs.push(img);
    })
    let i = 0;
    let t = 0;

    let ticket = setInterval(() => {
        render();
    }, 100);
    const render = () => {
        i = i + 0.2;
        if (t >= imgs.length) {
            t = 0;
        }
        let r = 14;//控制心形大小
        let x = r * 16 * Math.sin(i) * Math.sin(i) * Math.sin(i);
        let y = r * (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));
        ctx.drawImage(imgs[t], x, y, imgs[t].width, imgs[t].height);
        t = t + 1;
        if (i > imgs.length) {
            clearInterval(ticket);
        }
    }
}
onMounted(() => {
    beginPathTime();
    beginPathHeart();
})
</script>

<style lang="less" scoped>
.box {
    width: 600px;
    height: 600px;
    box-shadow: 0px 0px 10px #ccc;
}

.box+.box {
    margin-top: 50px;
}
</style>